<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部标题 -->
    <div class="py-4 text-center bg-[#1677ff]">
      <h1 class="text-2xl font-bold text-white">支付结果</h1>
    </div>

    <div class="max-w-md mx-auto p-4">
      <!-- 结果卡片 -->
      <a-card class="mb-4 shadow-sm" :bordered="false">
        <!-- 成功图标 -->
        <div class="text-center mb-6">
          <check-circle-outlined class="text-6xl text-[#1677ff]" />
        </div>

        <!-- 结果信息 -->
        <div class="text-center mb-6">
          <h2 class="text-xl font-bold text-gray-800 mb-2">支付成功</h2>
          <p class="text-gray-500">您的订单已支付完成</p>
        </div>

        <!-- 支付信息 -->
        <div class="mb-6">
          <a-descriptions bordered>
            <a-descriptions-item label="订单号">
              {{ orderNo }}
            </a-descriptions-item>
            <a-descriptions-item label="交易号">
              {{ tradeNo }}
            </a-descriptions-item>
            <a-descriptions-item label="支付金额">
              ¥{{ amount }}
            </a-descriptions-item>
          </a-descriptions>
        </div>

        <!-- 完成按钮 -->
        <a-button
          type="primary"
          block
          size="large"
          class="custom-button"
          @click="handleComplete"
        >
          完成
        </a-button>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { CheckCircleOutlined } from '@ant-design/icons-vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const orderNo = ref(route.query.orderNo as string)
const tradeNo = ref(route.query.tradeNo as string)
const amount = ref(route.query.amount as string)

// 完成按钮点击处理
const handleComplete = () => {
  // 尝试返回上一页，如果没有上一页则返回首页
  if (window.history.length > 1) {
    router.back()
  } else {
    router.push('/')
  }
}
</script>

<style scoped>
.ant-card {
  border-radius: 8px;
}

.custom-button {
  height: 44px;
  font-size: 16px;
  border-radius: 8px;
  background-color: #1677ff;
  border-color: #1677ff;
  color: white;
  transition: all 0.3s;
}

.custom-button:hover {
  background-color: #4096ff;
  border-color: #4096ff;
  color: white;
}

.custom-button:active {
  background-color: #0958d9;
  border-color: #0958d9;
  color: white;
}

.ant-descriptions-item-label {
  width: 120px;
  color: #666;
}

.ant-descriptions-item-content {
  color: #333;
}
</style>